<template>
    <div>
        <el-form ref="form" label-width="80%">
            <div class="box-body">
                <section class="content" id="diff">
                    <div class="row">
                        <el-table stripe :highlight-current-row='true' :data="datas" border style="width: 100%">
                            <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                            <el-table-column label="属性" :width='180'>
                                <template scope="scope">
                                    {{ fieldFormatter(scope.row) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="变更前" :width='180' >
                            <template scope="scope">
                                <el-button v-if="isClickable(scope.row) && !isEmpty(scope.row.before)" size="small" @click="viewBefore(scope.row)">
                                    <i class="fa fa-edit">查 看</i>
                                </el-button>
                                <label v-if="!isClickable(scope.row) && !isEmpty(scope.row.before)">{{ beforeFomatter(scope.row) }}</label>
                            </template>
                            </el-table-column>
                            <el-table-column label="变更后" :width='180'>
                                <template scope="scope">
                                    <el-button v-if="isClickable(scope.row) && !isEmpty(scope.row.after)" size="small" @click="viewAfter(scope.row)">
                                        <i class="fa fa-edit">查 看</i>
                                    </el-button>
                                    <label v-if="!isClickable(scope.row) && !isEmpty(scope.row.after)">{{ afterFomatter(scope.row) }}</label>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </section>
            </div>
        </el-form>
    </div>
</template>

<script>
    import approveUtils from "../../../common/approveUtils";
    let approvalObj = new approveUtils()
    export default {
        name: "Diff",
        props: ["dffers"],
        components: {
        },
        data() {
            return {
                datas: this.dffers,
                columns: approvalObj.getDiffCols(),
                differCols: {
                    name: {
                        title: '姓名',
                        formatter: (row) => approvalObj.stringFormatter(row, 'name')
                    },
                    workerType: {
                        title: '用工性质',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.workerType, row, 'workerType')
                    },
                    state: {
                        title: '在职状态',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.state, row, 'state')
                    },
                    sex: {
                        title: '性别',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.sex, row, 'sex')
                    },
                    idCard: {
                        title: '身份证',
                        formatter: (row) => approvalObj.stringFormatter(row, 'idCard')
                    },
                    nation: {
                        title: '民族',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.nationals, 'nation')
                    },
                    birthday: {
                        title: '出生日期',
                        formatter: (row) => approvalObj.stringFormatter(row, 'birthday')
                    },
                    age: {
                        title: '年龄',
                        formatter: (row) => approvalObj.stringFormatter(row, 'age')
                    },
                    positionType: {
                        title: '职务级别',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.positionType, 'positionType')
                    },
                    PtGraduateTime: {
                        title: '在职毕业时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'PtGraduateTime')
                    },
                    fistengagetime: {
                        title: '首次聘任时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'fistengagetime')
                    },
                    nativePlace: {
                        title: '籍贯',
                        formatter: (row) => approvalObj.nativePlaceFormatter(this.$store.state.provinces, this.$store.state.cities, row)
                    },
                    politicalStatus: {
                        title: '政治面貌',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.politicalStatus, row, 'politicalStatus')
                    },
                    joinPartyTime: {
                        title: '入党时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'joinPartyTime')
                    },
                    joinWorkTime: {
                        title: '参加工作时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'joinWorkTime')
                    },
                    createTime: {
                        title: '进本系统时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'createTime')
                    },
                    source: {
                        title: '来源渠道',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.channels, row, 'source')
                    },
                    departmentId: {
                        title: '现工作单位',
                        formatter: (row) => approvalObj.departFormater(this.$store.state.departments, row, 'departmentId')
                    },
                    FtEducation: {
                        title: '全日制教育最高学历',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.FtEducation, row, 'FtEducation')
                    },
                    FtSchool: {
                        title: '全日制教育毕业院校及专业',
                        formatter: (row) => approvalObj.stringFormatter(row, 'FtSchool')
                    },
                    PtEducation: {
                        title: '在职教育最高学历',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.FtEducation, row, 'PtEducation')
                    },
                    PtSchool: {
                        title: '在职教育毕业院校及专业',
                        formatter: (row) => approvalObj.stringFormatter(row, 'PtSchool')
                    },
                    job: {
                        title: '岗位级别',
                        formatter: (row) => approvalObj.positionlevelFormatter(this.$store.state.sysconfigs.postTypes,this.$store.state.sysconfigs, row, 'job')
                    },
                    gwType: {
                        title: '岗位类别',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.postTypes, row, 'gwType')
                    },
                    positions: {
                        title: '职务',
                        formatter: (row) => approvalObj.positionFormater(this.$store.state.sysconfigs.positions, row, 'positions')
                    },
                    FtGraduateTime: {
                        title: '全日制毕业时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'PtSchool')
                    },
                    tel: {
                        title: '办公电话',
                        formatter: (row) => approvalObj.stringFormatter(row, 'tel')
                    },
                    phone: {
                        title: '手机号码',
                        formatter: (row) => approvalObj.stringFormatter(row, 'phone')
                    },
                    married: {
                        title: '婚姻状况',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.married, row, 'married')
                    },
                    image: {
                        title: '头像',
                        formatter: (row) => approvalObj.stringFormatter(row, 'ptj')
                    },
                    ptj: {
                        title: '专业技术职务',
                        formatter: (row) => approvalObj.stringFormatter(row, 'ptj')
                    },
                    ptl: {
                        title: '专业技术级别',
                        formatter: (row) => approvalObj.categoryFormatter(this.$store.state.sysconfigs.ptl, row, 'ptl')
                    },
                    firstSignTime: {
                        title: '首次签订合同时间',
                        formatter: (row) => approvalObj.stringFormatter(row, 'firstSignTime')
                    },
                    resume: {
                        title: '个人简历',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    baseInfo: {
                        title: '基础信息',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    extraInfo:{
                        title: '补充信息',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    socialReltaion: {
                        title: '家庭及主要社会关系',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    onlineWork: {
                        title: '在职培训',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    continueTrain: {
                        title: '继续教育',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    technicalPosition: {
                        title: '专业技术职务',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    takePart: {
                        title: '参加活动（竞赛）情况',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    projects: {
                        title: '参加工程项目建设情况',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    },
                    annualAssessment: {
                        title: '年度考核',
                        clickable: true,
                        formatter: (row) => {
                            return row
                        }
                    }
                }
            };
        },
        methods: {
            isEmpty(data){
                if(data && data instanceof Array){
                    return data.length <= 0
                }
                if(!data){
                    return true
                }
                return false
            },
            viewBefore(row) {
                var propName = 'view'+row.field+'Visible'
                var data = row.before
                this.$emit('viewDataChanged', {propName:propName,data:data});
            },
            viewAfter(row) {
               var propName = 'view'+row.field+'Visible'
                var data = row.after
                this.$emit('viewDataChanged', {propName:propName,data:data});
            },
            afterFomatter(row) {
                var col = this.differCols[row.field]
                if (col) {
                    var formatter = col.formatter
                    return formatter(row.after)
                }
                return row.field
            },
            beforeFomatter(row) {
                var col = this.differCols[row.field]
                if (col) {
                    var formatter = col.formatter
                    return formatter(row.before)
                }
                return row.field
            },
            fieldFormatter(row) {
                var col = this.differCols[row.field]
                if (col) {
                    return col.title
                }
                return row.field
            },
            isClickable(data) {
                var col = this.differCols[data.field]
                if (col && col.clickable) {
                    return true
                }
                return false
            },
            view(row) {
                console.log('view data:' + row.field + " json:" + JSON.stringify(row))
            }
        }
    };
</script>
